<template>
  <div class="my-project">
    <div>我的项目</div>
    <el-table :data="projectList" 
      style="width: 100%" 
      height="600" 
      @row-click="openProject" 
      :header-cell-style="{'font-weight': 'normal'}">
      <el-table-column prop="projectName" label="名称" width="400" />
      <el-table-column prop="owner.username" label="创建者" width="210" />
      <el-table-column prop="createTime" :formatter="formatDate" label="创建时间" />
    </el-table>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'

import { selectAllProject } from "@/api/index"

import { ElMessage } from 'element-plus'
import bus from '../../../config/bus'

export default defineComponent({
  name: 'my-project',

  setup() {
    //自己的所有项目
    const projectList = ref([])

    const router = useRouter()

    //创建项目成功，展示的信息也应该发生变化
    bus.on('createProjectSuccess', e => projectList.value.unshift(e))

    //初始化
    const init = () => {
      console.log('初始化')
      //查询自己所有项目
      selectAllProject().then(res => {
        if (res.code == 0) {
          projectList.value = res.data
        } else {
          ElMessage.warning(res.msg)
        }
      })
    }
    init()

    //格式化日期列
    const formatDate = (row, column) => {
      let data = row[column.property]
      if (data == null) {
        return null
      }
      return dateFormat(data)
    }

    //时间格式化
    const dateFormat = (time) => {
      let date = new Date(time)
      let year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate()
      let hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`
    }

    //跳转到项目详情
    const openProject = (row) => {
      //根据获取到的项目id，跳转到项目开发页面并打开项目
      router.push({
        path: '/project-editor',
        query: {
          name: row.projectName,
          pid: row.id
        }
      })
    }
    return {
      projectList,
      openProject,
      formatDate
    }
  },
})
</script>

<style lang="scss" scoped>
.my-project {

  div:first-child {
    color: #212B3E;
    font-size: 16px;
    margin-left: 12px;
    margin-top: 10px;
  }
}
</style>